<template>
  <div class="count-info">
    <div class="upload-nav">
      <span class="upload-nav-item active">视频投稿</span>
      <a class="upload-nav-item">短剧投稿</a>
      <a class="upload-nav-item">专栏投稿</a>
      <a class="upload-nav-item">互动视频投稿</a>
      <a class="upload-nav-item">音频投稿</a>
      <a class="upload-nav-item">贴纸投稿</a>
      <a class="upload-nav-item">视频素材投稿</a>
    </div>
    <router-view></router-view>
    <div class="upload-explain">
      <div class="item">禁止发布的视频内容</div>
      <el-popover placement="top-end" :width="420" trigger="hover">
        <template #reference>
          <div class="item">视频大小</div>
        </template>
        <div>
          <p>网页端上传的文件大小上限为2G</p>
          <p>视频内容时长最大1小时</p>
          <p>粉丝量≥1000，即可体验10G超大文件上限哦!</p>
          <p>过长或过大视频建议拆分后使用分p或合集功能进行投稿～</p>
        </div>
      </el-popover>
      <el-popover placement="top-end" :width="420" trigger="hover">
        <template #reference>
          <div class="item">视频格式</div>
        </template>
        <div>
          <p>网页端、桌面客户端推荐上传的格式为：mp4,flv</p>
          <p>（推荐上传的格式在转码过程更有优势，审核过程更快哦！）</p>
          <p>其他允许上传的格式：mp4,flv,avi,wmv,mov,webm,mpeg4,ts,mpg,rm,rmvb,mkv,m4v</p>
        </div>
      </el-popover>
      <el-popover placement="top-end" :width="420" trigger="hover">
        <template #reference>
          <div class="item">视频码率</div>
        </template>
        <div>
          <p>分辨率最大支持 1920*1080</p>
          <p>推荐视频分辨率：1080p 或者 720p</p>
          <p>推荐视频码率：1080p大于6000kbps；</p>
          <p>视频分辨率和码率过高，可能导致上传失败或审核不通过</p>
        </div>
      </el-popover>
    </div>
    <div class="fote-text">上传视频，即表示您已同意 <a href="https://www.bilibili.com/protocal/licence.html">>哔哩哔哩使用协议</a> 与
      <a href="https://member.bilibili.com/platform/treaty?search=q0&">哔哩哔哩社区公约</a> ，请勿上传色情，反动等违法视频。</div>
  </div>
</template>
<script setup>
import {getCurrentInstance} from "vue";
import {useRoute, useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
</script>
<style scoped lang="scss">
.count-info{
  min-width: 930px;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #99a2aa;
}
.upload-explain{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  font-size: 12px;
  .item{
    color: #99a2aa;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
  }
}
.upload-nav{
  display: flex;
  padding: 0 80px;
  justify-content: space-between;
  border-bottom: 1px solid #e5e9ef;
  .upload-nav-item{
    padding: 26px 0 18px;
    font-weight: 500;
    color: #505050;
    &:hover{
      color: #00a1d6;
      cursor: pointer;
    }
  }
  .active{
    color: #00a1d6;
    font-weight: 700;
    border-bottom: 3px solid #00a1d6;
  }
}
.fote-text{
  margin: 20px 0 20% 0;
  font-size: 12px;
  a{
    color: #00a1d6;
    text-decoration: none;
  }
}
</style>
<style>
.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before{
  border: 1px solid #f9d199;
  color: #666;
  font-size: 14px;
  background-color: #fcfae0;
}
</style>